{{#>base title=data.page.datepicker}}

    {{#*inline "pageContent"}}
        <div class="row">
            <div class="col-md-12">
                <h3 class="page-title">
                    {{data.page.datepicker}}
                </h3>

                <div class="tabs-wrap">
                    <ul  class="nav nav-tabs">
                        <li>
                            <a href="datepicker.html" >日期</a>
                        </li>
                        <li  class="active" >
                            <a href="daterangepicker.html" >日期范围</a>
                        </li>

                        <li>
                            <a href="datetimepicker.html" >时间</a>
                        </li>

                    </ul>
                </div>

            </div>
        </div>

        <div class="row">
            <div class="col-md-12">

                <!-- BEGIN PORTLET-->
                <div class="portlet box default">
                    <div class="portlet-body form">
                        <form class="form-horizontal ">


                            <div class="form-body">
                                <div class="form-group ">

                                    <div class="col-md-4">
                                        <div id="picker" class="input-group date-range-picker input-large">
                                            <input type="text" class="form-control">
                                                        <span class="input-group-btn">
                                                            <button type="button" class="btn default btn-default date-range-toggle">
                                                                <i class="fa fa-calendar"></i>
                                                            </button>
                                                        </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>

                    </div>
                </div>
                <!-- END PORTLET-->

            </div>
        </div>

        <div class="row">
            <div class="col-md-12">
                <div class="markdown">
                    <h3>HTML代码</h3>
<pre><code class="html">&lt;div id=&quot;picker&quot; class=&quot;input-group daterangepicker-custom&quot;&gt;
    &lt;input type=&quot;text&quot; class=&quot;form-control  form-control-lg&quot;&gt;
    &lt;span class=&quot;input-group-btn&quot;&gt;
        &lt;button type=&quot;button&quot; class=&quot;btn default btn-default date-range-toggle&quot;&gt;
            &lt;i class=&quot;fa fa-calendar&quot;&gt;&lt;/i&gt;
        &lt;/button&gt;
    &lt;/span&gt;
&lt;/div&gt;</code></pre>
                    <h3>Javascript代码</h3>
<pre><code class="javascript">$p.dateRangePicker("#picker", {
    defaultDate:[moment().subtract('days', 6),moment()],  //默认最近一周
}, function(start, end) {
    $p.alert("开始时间：" + start + " , 结束时间：" + end);
});</code></pre>




                </div>

            </div>
        </div>
    {{/inline}}

    {{#*inline "appScript"}}
        <script type="text/javascript">
            pagurian.call("modules/datepicker/app", function(app) {
                app.page.daterange();
            });
        </script>
    {{/inline}}

{{/base}}
